<template>
  <div class="app-layout" :class="{ 'dark-mode': isDarkMode }">
    <!-- 顶部导航栏 -->
    <Header :userInfo="userInfo" :isAdmin="isAdmin" @logout="handleLogout" />
    
    <!-- 侧边栏 -->
    <Aside :isAdmin="isAdmin" :activeRoute="activeRoute" />
    
    <!-- 主内容区域 -->
    <main class="content-wrapper">
      <transition name="fade" mode="out-in">
        <router-view v-slot="{ Component }">
          <component :is="Component" />
        </router-view>
      </transition>
    </main>
    
    <!-- 底部版权信息 -->
    <Footer />
    
    <!-- 全局加载动画 -->
    <div v-if="loading" class="global-loading">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <div class="loading-text">{{ loadingText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../store/user'
import { ElMessage } from 'element-plus'
import Header from './Header.vue'
import Footer from './Footer.vue'
import Aside from './Aside.vue'

// 路由相关
const router = useRouter()
const route = useRoute()
const activeRoute = ref(route.path)

// 状态管理
const userStore = useUserStore()
const userInfo = computed(() => userStore.user)
const isAdmin = computed(() => userStore.isAdmin)

// 加载状态
const loading = ref(false)
const loadingText = ref('加载中...')

// 深色模式状态
const isDarkMode = ref(false)



// 监听路由变化，更新当前激活的路由
const handleRouteChange = () => {
  activeRoute.value = route.path
}

// 处理登出
const handleLogout = async () => {
  try {
    loading.value = true
    loadingText.value = '正在退出...'
    await userStore.logout()
    ElMessage.success('退出成功')
    router.push('/login')
  } catch (error) {
    ElMessage.error('退出失败，请重试')
    console.error('Logout error:', error)
  } finally {
    loading.value = false
  }
}

// 监听路由变化
onMounted(() => {
  route.path && handleRouteChange()
  router.afterEach(handleRouteChange)
  
  // 检查深色模式状态
  isDarkMode.value = document.body.classList.contains('dark-mode')
  
  // 监听深色模式变化
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        isDarkMode.value = document.body.classList.contains('dark-mode')
      }
    })
  })
  
  observer.observe(document.body, {
    attributes: true,
    attributeFilter: ['class']
  })
})

</script>

<style scoped>
.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  transition: background-color 0.3s ease;
}

.app-layout.dark-mode {
  background-color: #0f0f0f;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  margin-left: 240px; /* 为侧边栏留出空间 */
  margin-top: 60px; /* 为顶部导航栏留出空间 */
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  min-height: calc(100vh - 60px);
}

.app-layout.dark-mode .content-wrapper {
  background-color: #0f0f0f;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color: #e5e5e5;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .content-wrapper {
    margin-left: 56px;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 10px;
    margin-left: 0;
  }
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 全局加载动画 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>